<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>

<style type="text/css">

    .triangle{
        width:0px;
        height:0px;
        border-right:6px solid transparent;
        border-left:6px solid transparent;
        border-bottom:6px solid #0984e3;

    }
    .line{
        border-bottom:2px solid #0984e3;
    }

    .btn_sel2{
        border: 1px solid #d1d1d1;
        border-radius: 3px;
        background: #fff;
        -webkit-box-shadow: 0 1px 0 #ccc;
        box-shadow: 0 1px 0 #ccc;
        font-size: 14px;
    }

    /*需要切换的hover类*/
    .hover2{
        background-color: #ff4757;
        color: white;
        /*font-weight: bold;*/
    }

</style>

<script type="text/javascript">
    // 鼠标移入移出事件
    $('.btn_sel2').hover(function() {
        // 鼠标移入时添加hover类
        $(this).addClass('hover2')
    }, function() {
        // 鼠标移出时移出hover类
        $(this).removeClass('hover2')
    });
</script>

<body>

<div style="width: 93%;margin-left: 30px;padding-bottom: 20px">
    <div class="row">
        <div>
            <span style="font-size: 25px; color: #0984e3 ">消息提醒</span>
        </div>
        <div class="triangle" style="margin-left: 20px"></div>
        <div class="line"></div>
        <div style="width: 100%; height: 50px; padding-left:20px;padding-top: 10px;background-color: #c8d6e5;margin-top: 10px;
                 -moz-box-shadow: 0px 0px 3px  #909090;-webkit-box-shadow: 0px 0px 3px  #909090;">

            <select style="height: 26px;">
                <option name="" value="">-不限-</option>
                <option name="" value="">1周年</option>
                <option name="" value="">1月内</option>
                <option name="" value="">3月内</option>
                <option name="" value="">3月外</option>
            </select>
            &nbsp;&nbsp;
            主题: <input type="text" value="" name="" placeholder="请输入主题关键字">
            &nbsp;&nbsp;
            <input class="btn_sel2" type="button" name="" value="查询" style="width: 60px">

        </div>
    </div>
    <div class="row" style="background-color:#ffffff; border: 1px solid #dbdbdb;margin-top: 10px;
             -moz-box-shadow: 0px 0px 1px  #909090;-webkit-box-shadow: 0px 0px 1px  #909090;">
        <div style="padding-left:20px;padding-top: 10px;">
            <span style="font-size: 18px">所有消息</span>
            <span style="font-size: 13px; color: #747d8c">(共 0 条，未读消息 0 条)</span>
        </div>
        <div style="padding-left:20px;padding-top: 5px;background-color: #f1f2f6;height: 30px">
            <div style="float: left; width: 40%">
                <input type="checkbox" value="" name="" >全选
            </div>
            <div style="float: left; width: 40%">主题</div>
            <div style="float: left; width: 15%">发送时间</div>
            <div style="float: left; width: 5%">操作</div>
        </div>
        <div style="padding-left:20px;padding-top: 5px;;height: 100px;text-align: center;line-height: 50px">
            暂时没有相关订单
        </div>
        <div style=" padding-left:18px;background-color: #f1f2f6;height: 30px">
            <input class="btn_sel2" type="button" name="" value="删除" style="width: 60px;height: 30px">
        </div>
    </div>
</div>


</body>
</html>